<!DOCTYPE html>
<html>

<head>
	<meta charset="utf-8" />
	<meta name="viewport"
		content="width=device-width, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, user-scalable=0">
	<meta name="renderer" content="webkit" />
	<meta name="force-rendering" content="webkit" />
	<title>心内科</title>
	<link rel="stylesheet" type="text/css" href="css/common.css" />
	<link rel="stylesheet" type="text/css" href="css/index.css" />
	<link rel="stylesheet" type="text/css" href="css/popup.css" />
	<script src="js/config.js"></script>
	<script src="js/jquery-1.8.1.min.js"></script>
	<script src="https://unpkg.zhimg.com/axios/dist/axios.min.js"></script>
	<script src="js/axios-config.js?v=4"></script>
	<script src="https://cdn.jsdelivr.net/npm/vue"></script>
</head>

<body class="bodybg">
	<div class="category-content d-f" id="app">
		<div class="category-keshi">
			<ul>
				<li v-bind:class=" curIndex == index? 'on':'' " v-for="(item,index) in dataList"
					@click="switchTab(index)">
					{{item.name}}
				</li>
			</ul>
		</div>
		<div class="keshi-cells">
			<span v-bind:class="selected[item.id]?'keshi-cell-list on':'keshi-cell-list'" v-for="item in curSub" @click="selectItem(item.id)">{{item.name}}</span>
			<!-- <span class="keshi-cell-list on">分时免疫科</span> -->
		</div>
	</div>
</body>

<script>
	var app = new Vue({
		el: '#app',
		data: {
			curIndex: 0,
			dataList: [],
			curSub: [],
			selected: {}
		},
		watch: {
			curIndex: function (newValue) {
				console.log(newValue, '1234')
				this.curSub = this.dataList[newValue]['sub'] ? this.dataList[newValue]['sub'] : []
			}
		},
		created() {
			this.getTree()
		},
		methods: {
			getTree() {
				axios('/mp/category/tree').then(res => {
					this.dataList = res.data;
					this.curSub = res.data[0]['sub']
					console.log(res.data)
					this.getSelected()
				})
			},
			getSelected() {
				axios.get('/mp/category/selected').then(res => {
					let selected = {};
					res.data.forEach(e => {
						console.log(e)
						selected[e] = true;
					})
					this.selected = selected
					console.log(this.selected)
				})
			},
			switchTab(e) {
				this.curIndex = e
			},
			selectItem(id) {
				this.selected[id] = !this.selected[id]
				axios.post('/mp/category/select',this.selected).then(res=>{
					console.log(res)
				})
			},
		}
	})

</script>

</html>